
 <template>
    <div class="admin-wrapper">
      <div class="admin-sidebar">
        <el-menu :default-active="activeIndex" class="el-menu-vertical-demo" 
                 @select="handleMenuSelect">
          <el-menu-item index="1">
            <i class="el-icon-picture"></i>
            <span slot="title">图片管理</span>
          </el-menu-item>
          <el-menu-item index="2">
            <i class="el-icon-truck"></i>
            <span slot="title">物流线路管理</span>
          </el-menu-item>
          <el-menu-item index="3">
            <i class="el-icon-user"></i>
            <span slot="title">用户管理</span>
          </el-menu-item>
        </el-menu>
      </div>
      <div class="admin-content">
        <h1>{{ title }}</h1>
        <component :is="content"></component>
      </div>
    </div>
  </template>
  
  <script>
  import ManagePage from './ManagePage.vue';
  import ImaManage from './ImgManage.vue';
  import ThingManage from './ThingManage.vue';
  export default {
    data() {
      return {
        activeIndex: "1",
        title: "图片管理内容",
        content:''
      };
    },
    
    methods: {
      handleMenuSelect(index) {
        switch (index) {
          case "1":
            this.title = "图片管理内容";
            this.content =ImaManage
            break;
          case "2":
            this.title = "物流线路管理内容";
            this.content = ThingManage
            break;
          case "3":
            this.title = "用户管理内容";
            this.content = ManagePage
            break;
        }
      }
    }
  };
  </script>
  
  <style>
  .admin-wrapper {
    display: flex;
    height: 90vh;
    position: relative;
    top: -50px;
  }
  
  .admin-sidebar {
    width: 200px;
    background-color:#001529;
    color: #fff;
  }
  
  .admin-content {
    flex: 1;
    padding: 20px;
  }
  .el-menu-item{
    background-color:antiquewhite;
  }
  </style>
  